<template>
    <!--课程购买-->
    <div>
        <headers></headers>
        <div class="divider">
            <div class="auto">
                <a href="">个人中心 > 我的证书 > 继续教育 > 缴费</a>
            </div>
        </div>
        <div class="clearfix auto padding250">
            <div class="left">
                <p class="buy">证书名称：{{certificateName}}</p>
                <ul class="cless">
                    <li><span>学习周期：</span>{{studyStartTime}}至{{studyEndTime}}</li>
                    <li><span>费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用：</span>￥{{amount}}</li>
                </ul>
                <ul class="offer_money">
                    <li>需支付金额</li>
                    <li>应付金额：<span>￥{{amount}}</span></li>
                </ul>
            </div>
            <div class="left">
                <p class="titles">支付方式</p>
                <ul class="way">
                    <li :class="{active:0===nowIndex}" @click="toggle(0)">
                        <img src="./../../assets/radio3.png" alt="" v-if="nowIndex == 0">
                        <img src="./../../assets/radio1.png" alt="" v-else>
                        <label><img src="./../../assets/buy1.png" alt="" width="20">支付宝支付</label>
                    </li>
                    <li @click="toggle(1)" :class="{active:1===nowIndex}">
                        <img src="./../../assets/radio3.png" alt="" v-if="nowIndex == 1">
                        <img src="./../../assets/radio1.png" alt="" v-else>
                        <label><img src="./../../assets/buy2.png" alt="" width="21">微信支付</label>
                    </li>
                    <li @click="toggle(2)" :class="{active:2===nowIndex}">
                        <img src="./../../assets/radio3.png" alt="" v-if="nowIndex == 2">
                        <img src="./../../assets/radio1.png" alt="" v-else>
                        <label><img src="./../../assets/xuexibi.png" alt="" width="21">学习币支付</label>
                    </li>
                    <!--<li>
                        <Button class="offer">立即充值</Button>
                    </li>-->
                </ul>
                <div style="margin-bottom: 10px;">
                    <span style="font-size: initial;">可用学习币{{userAmount}}</span>
                    <router-link to="/ziliao/chongzhi" style="font-size: initial;">去充值学习币></router-link>
                </div>
                <a href="javascript:;">
                    <Button class="offer_btn" v-on:click="buyOrder()">立即支付</Button>
                </a>
            </div>
        </div>
        <Modal class-name="vertical-center-modal" v-model="isShow" footer-hide width="300px" @on-cancel="modalChange">
            <ul class="model_content">
                <li v-if="nowIndex === 0">支付宝扫码支付</li>
                <li v-if="nowIndex === 1">微信扫码支付</li>
                <li><img :src="payUrl" alt="" width="251"></li>
                <li>支付成功后，系统将自动为您开通相应服务</li>
            </ul>
        </Modal>
        <Spin fix v-show="isSpinShow" >
            <div class="loader">
                <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
                <div class="font14">支付进行中，请稍等...</div>
            </div>
        </Spin>
        <footers></footers>
    </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    /* 旋转效果 */
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .agree .ivu-checkbox-wrapper {
        color: #666;
        /*font-size: 16px;*/
        font-size: 14px;
        margin-top: 15px;

        a {
            color: #083C68;
        }
    }

    .divider {
        height: 60px;
        background-color: #2F261E;
        font-size: 16px;
        line-height: 60px;
        text-align: left;
        color: #fff;

        span {
            margin: 0 10px;
        }

        a {
            color: #fff;

            &:hover {
                color: #9C7649;
                font-weight: 700;
            }
        }
    }

    .auto .left {
        background-color: #fff;
        margin-bottom: 20px;
        margin-top: 30px;
        padding: 30px;
        text-align: left;

        .buy {
            font-size: 20px;
            color: #333;
            padding-bottom: 20px;
        }

        .titles {
            font-size: 18px;
            color: #333;
            padding-bottom: 20px;
            border-bottom: 1px solid #dbdbdb;
        }

        ul.cless {
            border-bottom: 1px solid #dbdbdb;
            padding-bottom: 20px;

            li {
                font-size: 16px;
                color: #999;
                line-height: 30px;

                span {
                    color: #333;
                }
            }

        }

        .clearfix {

            padding-bottom: 40px;
            padding-top: 20px;
        }

        .offer_money {
            font-size: 16px;
            color: #333;
            padding-top: 20px;

            li:last-child {
                color: #999;
                margin-top: 10px;

                span {
                    font-size: 18px;
                    color: #ff0000;
                }
            }
        }

        .way {
            padding-top: 30px;

            li {
                display: inline-block;
                margin: 0 40px 40px 0;

                > img {
                    vertical-align: middle;
                    margin-right: 20px;
                }
            }

            li:last-child {
                button {
                    font-size: 14px;
                    color: #B2936B;
                    border: 1px solid #B2936B;
                    margin-bottom: 5px;
                }
            }

            li label {
                width: 154px;
                height: 48px;
                line-height: 48px;
                font-size: 16px;
                color: #333;
                border: 1px solid #d9d9d9;
                text-align: center;
                display: inline-block;
                cursor: pointer;

                img {
                    vertical-align: sub;
                    margin-right: 10px;
                }
            }

            li.active label {
                border-color: #00aaf0;
            }
        }

        .desc {
            color: #8C663E;
            font-size: 14px;
        }

        .offer_btn {
            color: #fff;
            font-size: 16px;
            background-color: #957960;
            height: 53px;
            width: 227px;
            border-color: #957960;
            margin-top: 20px;
        }
    }
</style>
<script type="text/ecmascript-6">
    import {centreInfoWeb , payorderStatusWeb, balancePayWeb, addOrder } from "../../http"
    import headers from '../template/header'
    import footers from '../template/footer'

    export default {
        name: 'buy',
        props: {},
        data() {
            return {
                isShow:false,            //支付确认
                userAmount: 0,
                resdata: '',
                isSpinShow: false,
                doller: false,
                nowIndex: 0,
                ishsow: false,
                payUrl: '',
                timer: '',
                certificateName: this.$route.query.certificateName,
                studyStartTime: this.$route.query.studyStartTime,
                studyEndTime: this.$route.query.studyEndTime,
                amount: this.$route.query.amount,
                usercertificateId: this.$route.query.usercertificateId
            };
        },
        methods: {
            //微信支付窗口发生变化,清除定时器
            modalChange(){
                clearInterval(this.timer);
            },
            payInfo() {
                //查询用户账号
                centreInfoWeb().then(res => {
                    if(res.code === 200) {
                        this.userAmount = res.data.studyCoin;
                    }
                })
            },
            //点击立即支付
            buyOrder() {
                if (this.nowIndex == 2 && (this.resdata.amount * 1 > this.userAmount * 1)) {
                    this.$Notice.warning({
                        title: "考试缴费提醒",
                        desc: "学习币不足，请充值",
                        duration: 3,
                    });
                    return
                }
                //创建订单
                addOrder({type: 'OT_STUDY',targetId: this.usercertificateId, applyType: 3}).then(res => {
                    this.isSpinShow = true
                    if(res.code === 200) {
                        this.resdata = res.data
                        //查询订单状态
                        payorderStatusWeb({orderId: this.resdata.orderId}).then(res => {
                            if (res.data.orderStatus.code === 'OS_UNPAID') {
                                this.payOrder()
                            }else{
                                this.isSpinShow = false
                                this.$Notice.warning({
                                    title: '支付失败',
                                    desc: '当前订单不可支付',
                                    duration: 3,
                                });
                            }
                        })
                    }
                })
            },
            //支付二维码生成链接
            payCode() {
                let formalUrl = "http://api.cbstudy.com"
                let testUrl = "http://test.cbstudy.com"
                let localhost = "http://localhost:81"
                if (this.nowIndex == 0) {
                    // 跳转支付宝网页支付
                    var tempWindow = window.open('', '_blank', ''); //打开一个新的空白窗口
                    tempWindow.location.href = testUrl + "/base/common/toPay?payCode=AliPay&transactionType=PAGE&orderId=" + this.resdata.orderId;  //对新打开的页面进行重定向
                }
                if (this.nowIndex == 1) {
                    this.payUrl = testUrl + '/base/common/toQrPay?transactionType=NATIVE&payCode=WxPay&orderId=' + this.resdata.orderId;
                    this.isShow = true;
                }
            },
            payOrder(){
                if(this.nowIndex == 2) {     //使用学习币支付
                    balancePayWeb({orderId: this.resdata.orderId}).then(res => {
                        this.isSpinShow = false
                        console.info(res)
                        if (res.code === 200) {
                            this.$router.push({name: 'myzhengshu'})
                        } else {
                            this.$Modal.error({
                                title: '支付结果',
                                content: '支付失败!'
                            })
                        }
                    })
                }else{               //不使用学习币支付
                    this.payCode();
                    //二维码支付与监控
                    if(this.timer !== null){
                        clearInterval(this.timer)
                    }
                    this.timer = setInterval(() => {
                        this.newTimer = true;
                        //订单状态查询
                        payorderStatusWeb({orderId: this.resdata.orderId}).then(res => {
                            this.orderStatus = res.data.orderStatus.code;
                            //订单未支付
                            if (this.orderStatus === 'OS_UNPAID') {
                            }
                            //订单已完成
                            if (this.orderStatus === 'OS_FINISH') {
                                this.isSpinShow = false
                                // this.status = 2;
                                clearInterval(this.timer);
                                this.$router.push({name: 'myzhengshu'})
                            }
                            //订单已关闭
                            if (this.orderStatus === 'OS_CLOSE') {
                                this.isSpinShow = false
                                clearInterval(this.timer);
                                this.$Notice.warning({
                                    title: "支付失败",
                                    desc: "订单超时，已关闭",
                                    duration: 3,
                                });
                                this.isShow = false;
                            }
                        }).catch()
                    }, 3000)
                }
            },
            toggle(index) {
                this.nowIndex = index;
            },
        },
        created() {
            this.payInfo()
        },
        //退出页面清除定时器
        destroyed(){
            clearInterval(this.timer);
        },
        components: {
            headers,
            footers
        }
    }
</script>
